<template>
	<div class="clips_comment">
			<!--视频区开始  -->
		<div class="clips_comment_header">
			
			<router-link  :to="{path:'/clips'}">
			<div class="retreat_btn"></div>
			</router-link>

			<h2 class="clearFix">魔法触恋&nbsp;第一集</h2>

			<div class="clips_comment_header_logo"></div>

			<p>片花加载中...</p>

			<div class="clips_comment_fullScreen"></div>	

			<video id="my-video" class="video-js" controls preload="auto" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
				<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
				<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
				<source src="http://vjs.zencdn.net/v/oceans.ogg" type="video/ogg">		
				 <a href="http://videojs.com/html5-video-support/" target="_blank">
				 supports HTML5 video
				 </a>
			</video>

		</div>
			<!-- 视频区结束 -->

			<!-- 路由按钮开始 -->
		<div class="clips_comment_button" @click='className()'>

		 <router-link  active-class='comment_button_active' v-for="(product,index) in products" key='index' :to="{path:'/clips/clips_comment/'+product.path}" data-num='{product.id}'
		  class='clips_comment_button_info'  >
			<span class=" ">{{product.name}}</span>
		 </router-link>

		</div>
		<!-- 路由按钮结束 -->

		<div class="clips_comment_types">
			 <router-view></router-view>
		</div>
	</div>
</template>

<script>
export default {
  
    name:'clips',

    data(){

    	 return{
	        products:[
		        {
		            name:"神评论",
		            path:"clips_comment_gods",
		            id:1
		        },
		        {
		            name:"内容简介",
		            path:"clips_comment_intro",
		            id:2
		        },
		        {
		            name:"选集",
		            path:"clips_comment_selected",
		            id:3
		        }
            ],
     
         }

    },
    methods:{
    	className(){
    	


    	}

    }
}
</script>

<style scoped lang='less'>
	
/*评论头部*/
.clips_comment .clips_comment_header{

	height:360/64rem;

	width:100%;

	background:url('../../../static/images/11/vedieo_bottom.png') no-repeat;

	background-size:100% 360/64rem;

	position:relative;

	.retreat_btn{
		
		height:50/64rem;

		width:50/64rem;

		background:url('../../../static/images/11/retreat_btn.png') no-repeat;

		background-size:50/64rem 50/64rem;

		float:left;

		position:absolute;

		top:30/64rem;

		left:40/64rem;

	}
	.clips_comment_header_logo{

		height:110/64rem;

		width:230/64rem;

		background:url('../../../static/images/11/logo.png') no-repeat;

		background-size:  230/64rem  110/64rem;

		margin-top:50/64rem;

		margin-left:210/64rem;
    }
	h2{

		color:white;

		text-align:center;

		padding-top:40/64rem;

		font-size:30/64rem;

    }
    p{

     	color:white;

     	font-size:24/64rem;

     	text-align:center;

     	margin-top:45/64rem;

    }
    .clips_comment_fullScreen{

    	height:43/64rem;

    	width:43/64rem;

    	background:url('../../../static/images/11/fullScreen.png') no-repeat;

    	background-size:43/64rem 43/64rem;

    	position:absolute;

    	right:30/64rem;

    	bottom:20/64rem;

    }
    #my-video{

    		position: absolute;

    		top:90/64rem;

    		height: 250/64rem;

    		width: 100%;

    }

}
/*路由按钮样式*/
.clips_comment_button{
	
	width:(640-40)/640*100%;

	height:60/64rem;

	border:3/64rem solid rgb(165,75,232);

	margin: 0 auto;

	border-radius:10px;

	margin-top:20/64rem;

	font-size:25/64rem;

	display:flex;	
		
	.clips_comment_button_info{
			
			flex-grow:1;

			/*height:57/64rem;*/

			display:inline-block;

			border-right:3/64rem solid rgb(165,75,232); 

			color:rgb(165,75,232);

			text-align:center;

			line-height:60/64rem;

			&:nth-child(3){

				border-right:none;

			}


    }

    .comment_button_active{

    	background:rgb(165,75,232);

    	color:white;



    }

}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  text-decoration: none;
}
body {
  font-family: "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
  font-size: 25/64rem;
  color: #444;
}



</style>